<template>
  <view class="home-page">
    <view class="home">
      <!-- <nut-searchbar placeholder="请输入搜索内容" v-model="searchTxt" type="text" clearable>
        <template #leftin>
          <Search2 />
        </template>
      </nut-searchbar> -->

      <!-- <myInput v-model="searchTxt" @search="handleSearch" /> -->

      <!-- <swiper
        :init-page="0"
        :auto-play="3000"
        :circular="true"
        pagination-visible
        pagination-color="#426543"
        pagination-unselected-color="#808080"
        class="swiper-container"
      >
        <swiper-item
          v-for="(item, index) in pics"
          :key="index"
          class="swiper-item"
        >
          <image
            :src="item"
            mode="aspectFill"
            class="swiper-image"
            lazy-load
            show-menu-by-longpress
          />
        </swiper-item>
      </swiper> -->

      <image :src="topImg" class="top-img" mode="aspectFill" />

      <nut-noticebar :text="text" />

      <!-- <view class="s-title">
        <text>酒类</text>
        <text>更多</text>
      </view> -->

      <!-- 顶部进度条 -->
      <view class="progress-bar">
        <view
          class="progress-item"
          v-for="(item, index) in progressList"
          :key="index"
          @tap="handleFeatureClick(item)"
        >
          <image :src="item.imgUrl || pic" class="img1" mode="widthFix"></image>

          <text class="title">{{ item.name }}</text>
        </view>
      </view>

      <view class="ff-box">
        <image class="ff-img" :src="pic" mode="aspectFill"></image>
        <text class="ff-txt">防水维修</text>
      </view>
      <view class="ff-box">
        <image class="ff-img" :src="pic" mode="aspectFill"></image>
        <text class="ff-txt">装修防水</text>
      </view>

      <view class="s-title">
        <text>施工现场</text>
        <!-- <text>更多</text> -->
      </view>

      <view class="case-more">
        <view
          class="case-box"
          v-for="(item, index) in caseList"
          :key="index"
          @tap="goDetail(item)"
        >
          <image class="case-img" :src="item.image" mode="aspectFill"></image>
          <!-- <view class="p-title">{{ item.title }}</view>
          <view class="p-price">￥{{ item.price }}</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, ref } from "vue";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import Taro from "@tarojs/taro";
import { Search2 } from "@nutui/icons-vue-taro";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
import topImg from "@/assets/imgs/top.png";

import t1Img from "@/assets/imgs/t1.png";
import t2Img from "@/assets/imgs/t2.png";
import t3Img from "@/assets/imgs/t3.png";
const searchTxt = ref("");

const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
const text = ref(
  "NutUI 是京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用，帮助研发人员提升开发效率，改善开发体验。"
);

Taro.setNavigationBarTitle({
  title: "防水维修中心",
});

const pics = ref([]);

onMounted(() => {
  // http.post(`/api/mallIndex/banner`).then((res) => {
  //   console.log("res 轮播图", res);
  //   pics.value = res.data.columnValues;
  // });
  // http.post(`/api/mallIndex/goodsType`).then((res) => {
  //   console.log("res 商品类型", res);
  //   progressList.value = res.data.map((i) => i.columns);
  // });
});

// 进度条数据
const progressList = ref([
  { name: "关于我们", imgUrl: t1Img, id: 1 },
  { name: "联系客服", imgUrl: t2Img, id: 2 },
  { name: "一键分享", imgUrl: t3Img, id: 3 },
]);

// 案例展示数据
const caseList = [
  {
    title:
      "红红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒酒美酒",
    image: pic,
    price: 100,
  },
  { title: "红酒美酒红酒美酒红酒美酒红酒美酒", image: pic, price: 1800 },
  {
    title: "红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒红酒美酒",
    image: pic,
    price: 300,
  },
  { title: "红酒美酒红酒美酒红酒美酒红酒美酒", image: pic, price: 50 },
];

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
  Taro.navigateTo({
    url: `/pages-detail/cate/list-view?id=${item.id}`,
  });
};

const handleSearch = (value: string | number) => {
  console.log("搜索值：", value);
  // 执行搜索逻辑
};

const goDetail = (item) => {
  Taro.navigateTo({
    url: "/pages-detail/detail/index?id=" + item.id,
  });
};

const onTest = () => {
  Taro.navigateTo({
    url: "/pages-detail/addr/index",
  });
};
</script>

<style lang="scss">
.home-page {
  padding-bottom: 40rpx;
  width: 100%;
  overflow: hidden;
}
.home {
  width: 700rpx;
  margin: auto;
  height: 100%;
}
.ico {
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}
.tops {
  width: 100%;
  height: 300rpx;
}

.img2 {
  width: 120rpx;
  height: 120rpx;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  gap: 16rpx;
  margin-top: 20rpx;

  .progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    border-radius: 8rpx;

    .img1 {
      width: 70%;
    }

    .title {
      font-size: 32rpx;
      color: #333;
      padding: 8rpx;
    }
  }
}

.feature-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32rpx;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32rpx;
      background-color: #f8f8f8;
      border-radius: 16rpx;

      text {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
.case-more {
  display: flex;
  width: 100%;
  gap: 20rpx;
  flex-wrap: wrap;

  .case-box {
    box-shadow: 0 0 10rpx #999;
    display: flex;
    flex-direction: column;
    width: 338rpx;
    border-radius: 8rpx;
    .case-img {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
    }

    .p-title {
      font-size: 24rpx;
      color: #333;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 4rpx;
    }

    .p-price {
      font-size: 24rpx;
      color: #ff0000;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 4rpx;
    }
  }
}
.case-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;

    .case-item {
      image {
        width: 100%;
        height: 240rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.s-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10rpx;
  text {
    font-size: 30rpx;
    color: #333;
  }
}

.swp {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.swiper-container {
  width: 100%;
  height: 300rpx; /* 统一使用 rpx 单位 */
  border-radius: 16rpx;
  overflow: hidden;

  .swiper-item {
    width: 100%;
    height: 100%;

    .swiper-image {
      width: 100%;
      height: 100%;
      display: block;
      will-change: transform; /* 提升动画性能 */
    }
  }

  /* 修复分页器位置 */
  .nut-swiper-pagination {
    bottom: 20rpx !important;

    .nut-swiper-pagination-item {
      width: 16rpx;
      height: 16rpx;
      margin: 0 8rpx;
    }
  }
}
.top-img {
  width: 750rpx;
  transform: translateX(-25rpx);
  height: 420rpx;
  margin-bottom: 20rpx;
}

.ff-box {
  border-radius: 18rpx;
  background: #fff;
  box-shadow: 0 0 10rpx #cfcfcf;
  display: flex;
  padding: 24rpx;
  gap: 20rpx;
  margin-bottom: 24rpx;
  .ff-img {
    width: 360rpx;
    height: 200rpx;
    border-radius: 12rpx;
  }
  .ff-txt {
    font-size: 32rpx;
    color: #333;
  }
}
</style>
